<template>
  <div>
    <header>
      <h1>大数据可视化</h1>
    </header>
    <!-- 大容器 -->
    <section class="container">
      <!-- 左容器 -->
      <section class="itemLeft">
        <ItemPage>
          <ItemOne></ItemOne>
        </ItemPage>
        <ItemPage>
          <ItemTwo></ItemTwo>
        </ItemPage>
      </section>
      <!-- 中间容器 -->
      <section class="itemCenter">
        <MapPage></MapPage>
      </section>
      <!-- 右容器 -->
      <section class="itemRight">
        <ItemPage>
          <ItemThree></ItemThree>
        </ItemPage>
        <ItemPage>
          <ItemFour></ItemFour>
        </ItemPage>
      </section>
    </section>
  </div>
</template>

<script>
import ItemPage from "@/components/itemPage.vue"
import ItemOne from "@/components/itemOne.vue"
import ItemTwo from "@/components/itemTwo.vue"
import ItemThree from "@/components/itemThree.vue"
import ItemFour from "@/components/itemFour.vue"
import mapPage from "@/components/mapPage.vue"

import {inject} from "vue"
import MapPage from '../components/mapPage.vue'
export default {
  components: {
    ItemPage,
    ItemOne,
    ItemTwo,
    ItemThree,
    ItemFour,
    MapPage
  },
  setup() {
    let $echarts = inject('echarts')
    console.log($echarts);
    let $http = inject('axios')
  }
}
</script>

<style lang="less">
  header {
    height: 1rem;
    width: 100%;
    background-color: rgba(0,0,255,.2);
  }

  h1 {
    font-size: 0.375rem;
    color: #fff;
    text-align: center;
    line-height: 1rem;
  }

  .container {
    min-width: 1200px;
    max-width: 2048px;
    margin: 0 auto;//居中
    padding: .125rem .125rem 0; //顶 左右 底
    // background-color: gray;
    display: flex;
    
    .itemLeft, .itemRight {
      flex: 3;
    }

    .itemCenter {
      flex: 5;
      height: 10.5rem;
      border: 1px solid blue;
      padding: 0.125rem;
      margin: 20px;
    }
  }


</style>